<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪对象选择器</title>
		<style type="text/css">
			/*
			 内容之前添加一个伪元素
			 必须使用content调用出来，即使值为空也要写
			 这个伪元素是行内元素
			 * */
			.p1::before{
				content: "before";
				display: block;
				color: red;
			}
			/*
			 在内容之后
			 * */
			.p1::after{
				content: "after";
				display: block;
				color: blue;
			}
			/*
			 控制第一个字母
			 * */
			.p2::first-letter{
				font-size: 30px;
			}
			/*
			 控制第一行(文本节点)
			 * */
			.p2::first-line{
				color: orange;
			}
			/*
			 webkit ::-webkit-input-placeholder
			 moz :-moz-placeholder
			 moz(19+) ::-moz-placeholder
			 ie :-ms-input-placeholder
			 同时设置时会互相覆盖
			 * */
			input::-moz-placeholder,input:-ms-input-placeholder,input::-webkit-input-placeholder{
				color: red;
			}
			.p2::selection{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">p标签</p>
		<p class="p2">p2也是一个p标签<br/>p2也是一个p标签</p>
		<input type="text" name="" id="" value="" placeholder="请输入任意内容"/>
	</body>
</html>
